<script>
/* eslint-disable */

import { reactive } from 'vue'
export default {
  props: ['playlist'],
  setup(props) {
    // 通过props进行传值，判断如果数据拿不到，则从本地读取数据
    let creator = reactive({})

    if ((props.playlist.creator !== '')) {
      creator = JSON.parse(sessionStorage.getItem('itemDetail')).playlist.creator
    }
    // 对播放量进行处理
    const changeCount = (num) => {
      if (num >= 100000000) {
        // toFixed(1)显示一位小数
        return (num / 100000000).toFixed(1) + '亿'
      } else if (num >= 10000) {
        return (num / 10000).toFixed(1) + '万'
      }
    }
    return {
      props,
      creator,
      changeCount
    }
  }

}

</script>

<template>
  <div class="itemMusicTop">
    <img :src="playlist.coverImgUrl" class="bgimg">
    <div class="itemLeft">
      <svg class="icon" aria-hidden="true" @click="$router.go(-1)">
        <use xlink:href="#icon-zuojiantou"></use>
      </svg>
      <span>歌单</span>
    </div>
    <div class="itemRight">
      <svg class="icon icon-liebiao" aria-hidden="true">
        <use xlink:href="#icon-liebiao"></use>
      </svg>
    </div>
  </div>
  <div class="itemMusicContent">
    <div class="top">
      <div class="itemimg">
        <img :src="playlist.coverImgUrl">
        <span class="playCount">
          <svg t="1655285863705" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="14603" width="200" height="200">
            <path
              d="M899.117 526.883a30.04 30.04 0 0 1-3.976 5.365 29.922 29.922 0 0 1-1.548 1.58l-0.2 0.186a30.087 30.087 0 0 1-5.472 4.057L165.858 955.094c-0.047 0.027-0.1 0.046-0.143 0.073q-1.155 0.659-2.37 1.214c-0.145 0.066-0.289 0.132-0.434 0.2q-1.084 0.476-2.212 0.864c-0.238 0.083-0.475 0.165-0.713 0.241-0.645 0.205-1.3 0.386-1.963 0.548-0.348 0.085-0.7 0.168-1.044 0.24-0.56 0.116-1.126 0.213-1.7 0.3q-1.416 0.21-2.833 0.283h-0.016a29.977 29.977 0 0 1-4.5-0.107c-0.243-0.024-0.483-0.057-0.723-0.086a30.513 30.513 0 0 1-2.109-0.331 31.377 31.377 0 0 1-1.021-0.222c-0.6-0.139-1.191-0.293-1.78-0.469-0.331-0.1-0.658-0.2-0.984-0.315q-0.921-0.309-1.82-0.676c-0.241-0.1-0.479-0.2-0.716-0.307q-1.047-0.461-2.055-1c-0.108-0.058-0.215-0.118-0.322-0.177a29.753 29.753 0 0 1-8.652-7.174l-0.071-0.089a29.873 29.873 0 0 1-1.59-2.124c-0.3-0.439-0.589-0.885-0.866-1.34-0.108-0.179-0.233-0.341-0.338-0.524a29.859 29.859 0 0 1-4-16V95.886a30 30 0 0 1 44.981-26.984l722.265 417a30 30 0 0 1 10.988 40.981zM180.89 877.13l632.327-365.2L180.89 146.856V877.13z"
              fill="#ffffff" p-id="14604"></path>
          </svg>
          <span>{{ changeCount(playlist.playCount) }}</span>
        </span>
      </div>
      <div class="text">
        <span class="name">{{ playlist.name }}</span>
        <div class="creator">
          <div class="avatar">
            <img :src="creator.avatarUrl" style="height: 20px;">
            <span style="margin-left:8px;font-size:0.2rem;">{{ creator.nickname }}</span>
          </div>
          <div class="description">
            <span>{{ playlist.description }}</span>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-youjiantou"></use>
            </svg>
          </div>
        </div>
      </div>
    </div>
    <div class="bottem">
      <div class="item">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-iconfontzhizuobiaozhun023110"></use>
        </svg>
        <span>{{ playlist.subscribedCount }}</span>
      </div>
      <div class="item">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-fenxiang"></use>
        </svg>
        <span>{{ playlist.shareCount }}</span>
      </div>
      <div class="item">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-iconfontzhizuobiaozhun023146"></use>
        </svg>
        <span>下载</span>
      </div>
      <div class="item">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-show_duoxuan"></use>
        </svg>
        <span>多选</span>
      </div>
    </div>
  </div>
</template>

<style lang='less' scoped>
.itemMusicTop {
  width: 100%;
  height: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  // padding: .2rem;
  position: relative;

  .itemLeft {
    width: 25%;
  }

  .itemRight {
    width: 8%;
  }

  .itemLeft,
  .itemRight {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 .2rem;

    span {
      font-size: .4rem;
      color: white;
    }

    .icon {
      fill: white; //填充颜色
    }

    .icon-liebiao {
      width: 0.6rem;
      height: 0.6rem;
    }
  }

  .bgimg {
    width: 100%;
    height: 11rem;
    position: fixed;
    z-index: -1;
    //虚化
    filter: blur(0.6rem);
  }
}

.itemMusicContent {
  width: 100%;
  height: 5rem;

  .top {
    display: flex;
    justify-content: space-between;

    .itemimg {
      margin: .2rem;
      position: relative;

      img {
        height: 3rem;
        border-radius: .4rem;
      }

      .playCount {
        position: absolute;
        top: .1rem;
        right: .1rem;
        font-size: .24rem;
        color: white;

        .icon {
          width: .24rem;
          fill: white;
          vertical-align: middle;
        }
      }
    }

    .text {
      display: flex;
      flex-direction: column;
      padding: .25rem 0;
      justify-content: space-between;
      color: rgb(207, 205, 205);

      .name {
        font-weight: 500;
        color: white;
      }

      .avatar {
        margin-bottom: .2rem;

        img {
          height: .6rem;
          border-radius: .3rem;
          vertical-align: middle;

        }

        span {
          .icon {
            height: .24rem;
            fill: white;
            vertical-align: middle;
          }
        }

      }

      .description {
        font-size: .24rem;
        height: .6rem;
        display: flex;
        justify-content: space-around;
        align-items: center;

        span {
          width: 80%;
          height: .6rem;
          text-overflow: ellipsis;
          overflow: hidden;
          display: -webkit-box; //使用自适应布局
          -webkit-line-clamp: 2; //设置超出行数，要设置超出几行显示省略号就把这里改成几
          -webkit-box-orient: vertical;
        }

        .icon {
          width: 10%;
          height: .24rem;
          margin-right: .3rem;
          fill: white;
          vertical-align: middle;
        }
      }
    }
  }

  .bottem {
    display: flex;
    justify-content: space-around;
    color: white;
    margin-top: .2rem;

    .item {
      align-items: center;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .icon {
        fill: white;
        margin-bottom: .1rem;
      }
    }
  }
}
</style>
